<!--
 * @Description: 节点管控操作
 * @Author: wind-lc
 * @version: 1.0
 * @Date: 2022-11-22 17:44:57
 * @LastEditTime: 2023-01-16 18:15:55
 * @FilePath: \cscec-pms-admin\src\views\project\construction\components\OperationControl.vue
-->
<template>
  <a-modal title="节点管控" :width="950" :visible="visible" destroyOnClose @cancel="handleCancel">
    <a-spin :spinning="loading">
      <custom-form ref="form" :is-validate="true" :edit-model="''" :rules="rules" :form="form" :form-list="formOption" />
      <title-name title="通知岗位与通知方式" />
      <template v-if="type === 'update'">
        <a-button type="primary" class="mb20" @click="handleAdd"> 增行 </a-button>
        <a-button class="ml20 mb20" :disabled="selectedRowKeys.length <= 0" @click="handleDelete"> 删行 </a-button>
      </template>
      <a-table
        row-key="id"
        bordered
        :columns="columns"
        :data-source="list"
        :pagination="false"
        :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
        type="checked"
        class="operation-control requiredFormItem"
      >
        <template slot="noticePost" slot-scope="text, record">
          <SelectJobTree :disabled="type !== 'update'" v-model="record.noticePost" placeholder="请选择" />
        </template>
        <template slot="msg" slot-scope="text, record">
          <a-checkbox-group :disabled="type !== 'update'" v-model="record.msg" name="checkboxgroup" :options="msgOptions" />
        </template>
      </a-table>
    </a-spin>
    <template slot="footer">
      <a-button @click="handleCancel">
        {{ type === 'update' ? '取消' : '关闭' }}
      </a-button>
      <a-button v-if="type === 'update'" type="primary" @click="handleOk"> 确定 </a-button>
    </template>
  </a-modal>
</template>
<script>
import { formOption, columns, msgOptions } from '../model.js'
import SelectJobTree from '@/components/Select/SelectJobTree'
import { editConstructions } from '@/api/construction'
export default {
  name: 'OperationControl',
  props: {
    // 隐藏显示
    visible: {
      type: Boolean,
      required: true
    },
    // 列表行数据
    record: {
      type: Object,
      default: () => {}
    },
    // 操作类型 查看/编辑update
    type: {
      type: String,
      default: ''
    }
  },
  components: {
    SelectJobTree
  },
  data() {
    return {
      // 加载
      loading: false,
      // 表单
      form: {},
      // 表头
      columns,
      // 选中行
      selectedRowKeys: [],
      // 通知方式列表
      list: [],
      // 通知选项
      msgOptions
    }
  },
  computed: {
    // 表单选项
    formOption() {
      // 当节点等级为三级节点时，红灯亮灯时间、黄灯亮灯时间都不可编辑
      // 查看全部不可编辑
      return this.type === 'update'
        ? this.record.controlLevelName === '三级节点'
          ? this.$clone(formOption).map((el) => {
              if (['redTipDays', 'yellowTipDays'].includes(el.keyName)) el.disabled = true
              return el
            })
          : formOption
        : this.$clone(formOption).map((el) => {
            el.disabled = true
            return el
          })
    },
    // 表单校验
    rules() {
      const obj = {}
      formOption.forEach((item) => {
        if (item.rules) {
          obj[item.keyName] = item.rules
        }
      })
      return obj
    }
  },
  watch: {
    // 监听隐藏显示
    visible: {
      handler(val) {
        if (val) {
          this.form = { ...this.record }
          this.list =
            this.record?.noticeList?.map((el, index) => {
              const { noticePostCode, noticePostId, noticePostName, noticeType } = this.$clone(el)
              return {
                id: 'm' + index + new Date().getTime(),
                noticePost: {
                  noticePostCode,
                  noticePostId,
                  noticePostName
                },
                msg: noticeType.split(',')
              }
            }) || []
        }
      }
    }
  },
  methods: {
    /**
     * @description: 选中行事件
     * @param {array} selectedRowKeys 选中行id
     * @return {void}
     */
    onSelectChange(selectedRowKeys) {
      this.selectedRowKeys = selectedRowKeys
    },
    /**
     * @description: 确定
     * @return {void}
     */
    handleOk() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          if (this.list.length > 0) {
            if (this.list.every((el) => el.noticePost?.noticePostId && el.msg.length > 0)) {
              this.submit()
            } else {
              this.$message.warning('请选择通知岗位与通知方式')
            }
          } else {
            this.submit()
          }
        }
      })
    },
    /**
     * @description: 提交
     * @return {void}
     */
    submit() {
      editConstructions({
        ...this.form,
        redTipDays: typeof this.form.redTipDays === 'number' ? this.form.redTipDays : undefined,
        yellowTipDays: typeof this.form.yellowTipDays === 'number' ? this.form.yellowTipDays : undefined,
        noticeList: this.list.map((el) => {
          return {
            ...el.noticePost,
            noticeType: el.msg.join()
          }
        })
      }).then((res) => {
        if (res.code === this.SUCCESS_CODE) {
          this.$message.success('修改成功！')
          this.$emit('refresh', false)
          this.handleCancel()
        }
      })
    },
    /**
     * @description:取消
     * @return {void}
     */
    handleCancel() {
      this.form = {}
      this.selectedRowKeys = []
      this.list = []
      this.$emit('update:visible', false)
    },
    /**
     * @description: 增行
     * @return {void}
     */
    handleAdd() {
      this.list.push({
        id: 'm' + new Date().getTime(),
        noticePost: {},
        msg: []
      })
    },
    /**
     * @description: 删行
     * @return {void}
     */
    handleDelete() {
      this.list = this.list.filter((el) => !this.selectedRowKeys.includes(el.id))
      this.selectedRowKeys = []
    }
  }
}
</script>
<style lang="less" scoped>
@deep: ~'>>>';
@{deep} .operation-control .ant-checkbox-group-item {
  display: inline-block;
}
</style>
